
let vm = new Vue({

    // 通过ID选择器找到绑定的html标签的内容
    el : '#app',
    // 修改vue的模板语法
    delimiters : ['[[',']]'],

    data : {
        // v-model
        username:'',
        password:'',
        password2:'',
        mobile:'',
        allow:'',
        image_code_url:'',
        uuid:'',
        image_code:'',
        sms_code:'',
        sms_code_tip:'获取短信验证码',
        err_code_msg:'',
        // 该变量作为标记，默认允许访问
        sand_flag:false,
        

        // v-show
        error_name:false,
        error_password:false,
        error_password2:false,
        error_mobile:false,
        error_allow:false,
        error_image_code:false,
        error_sms_code:false,
        error_pic_code:false,

        // 自定义错误信息
        error_name_message:'',
        error_sms_code_message:'',
    },

    // 这个方法会在页面加载之后被调用
    mounted(){
        this.generate_image_code();
    },

    // 定义事件方法
    methods:{
        // 校验短信验证码
        check_sms_code() {
          if(this.sms_code.length != 4){
              this.error_sms_code = true;
          }  else {
              this.error_sms_code = false;
          }
        },

        //发送短信验证码
        send_sms_code() {
            // 判断作为标记的变量是否允许访问
            if (this.sand_flag == true ){
                // 当标记为true时，说明短时间内已经发送请求了，不允许访问停止方法。
                return;
            }
            // 标记允许访问，可以实现发送Ajax请求
            // 修改标记为不允许访问的状态
            this.sand_flag = true;

            let url = '/sms_code/'+this.mobile+'/?uuid='+this.uuid+'&image_code='+this.image_code;
            axios.get(url ,{responseType: 'json'})
            // 请求成功
                .then(response => {
                    // 实现发送短信验证码的倒计时
                    if (response.data.code == '0'){
                        let number = 60;
                        this.error_pic_code = false;

                        let t = setInterval(() => {
                            console.log(4536)
                            // 倒计时结束
                            if(number == 1){
                                // 倒计时结束
                                // 停止回调函数的执行
                                clearInterval(t)
                                this.sms_code_tip = '获取短信验证码';
                                // 倒计时结束之后，重新生成图片验证码
                                this.generate_image_code();
                                // 倒计时结束，把标记修改为允许访问的状态
                                this.sand_flag = false;
                                this.error_pic_code = false;
                            } else {
                                number -= 1 ;
                                this.sms_code_tip = number +'秒';

                            }
                        } , 1000)
                    } else {
                        // 短信验证码发送失败
                        this.error_sms_code_message = response.data.code_errmsg;
                        this.error_sms_code = true;
                        this.error_pic_code = true;
                    }
                // 把标记修改为允许访问的状态
                this.sand_flag = false;
                })
            // 请求失败
                .catch(error =>{
                    console.log(error.response)
                    // 把标记修改为允许访问的状态
                    this.sand_flag = false;
                })
        },

        // 校验图片验证码
        check_image_code(){
          if(this.image_code.length != 4){
              this.error_image_code = true;
          }  else {
              this.error_image_code = false;
          }

        },

        // 生成 图片验证码的url
        generate_image_code(){
            // 通过生成uuid来对用户进行标识
            this.uuid = generateUUID()
            this.image_code_url = '/image_code/'+this.uuid+'/'


        },

        // 校验用户名
        check_username(){
            // 定义用户名的规则
            let re = /^[A-Za-z0-9_]{5,15}$/;
            // 判断接收到的数据是否符合条件
            if(re.test(this.username)){
                // 数据合法
                this.error_name = false;
            } else {
                // 用户名不合法
                this.error_name = true;
                this.error_name_message = "用户名不合法 ， 应当使用A-Za-z0-9_"
            }

            // 判断用户是否重复
            // 前提保证用户名合法
            if(this.error_name == false){
                // 发送ajax请求
                let url = '/username/'+ this.username +'/count/';
                axios.get(
                    url , {responseType :'json'}
                )
                // 请求成功
                    .then(response => {
                        // 获取后端传递过来的数据 response.data
                        if(response.data.count == 1){
                            // 用户已存在
                            this.error_name_message = '用户名已存在';
                            this.error_name = true;
                        } else {
                            this.error_name = false;
                        }
                    })
                // 请求失败
                    .catch(error =>{
                        console.log(error.response)
                    })
            }
        },


        // 校验密码
        check_password(){
            // 密码中合法的字符
            let re=/^[0-9a-zA-Z]{6,20}$/;
            if(re.test(this.password)){
                // 符合要求 ， 密码字符合法
                this.error_password = false;
            } else {
                // 密码不合法 ，显示错误信息
                this.error_password = true;
            }
        },

        // 校验两次密码是否一致
        check_password2(){
            if(this.password2 == this.password){
                this.error_password2 = false;
            } else {
                this.error_password2 = true;
            }
        },

        // 校验手机号
        check_mobile(){
            let re =/^1[3-9]\d{9}$/;
            if(re.test(this.mobile)){
                this.error_mobile = false;
            } else {
                this.error_mobile = true;
            }
        },

        // 校验勾选框是否勾选
        check_allow(){
            if(this.allow){
                this.error_allow = false;
            } else {
                this.error_allow = true;
            }
        },

        // 校验表单中数据是否全部合格
        on_submit(){
            // 调用所有校验数据的方法
            this.check_username();
            this.check_password();
            this.check_password2();
            this.check_mobile();
            this.check_allow();
            // 判断error的对应值是否为true ， 如果其中有一个为true则限制提交
            if(this.error_name == true || this.error_password == true ||
                this.error_password2 == true || this.error_mobile == true || this.error_allow == true){
                // 禁止表单提交
                window.event.returnValue = false;
            }
        },

    }


})